<template>
	<view class="page">
		<view class="search-bar">
			<view class="search-box">
				<image
					src="https://wx.2024csnl.com/static/home/home-search.png"
					mode="aspectFill"
					class="icon" />
				<input
					type="text"
					class="input"
					placeholder="请输入关键词"
					confirm-type="search"
					placeholder-class="p-c"
					v-model="keyword"
					@confirm="search"
					_blur="search">
				<text
					class="btn"
					@click="search">搜索</text>
			</view>
		</view>
		
		<view class="select-bar">
			<view class="item">
				<picker
					@change="bindPickerChange1"
					:value="timeIndex"
					:range="timeArray"
					range-key="label">
					<view class="picker-value">
						<text
							v-if="timeIndex >= 0">{{ timeArray[timeIndex].label }}</text>
						<text
							v-else>发布时间</text>
						<image src="https://img.2024csnl.com/static/2.x/a72.png" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="item">
				<picker
					@change="bindPickerChange2"
					:value="classifyIndex"
					:range="classifyArray"
					range-key="label">
					<view class="picker-value">
						<text
							v-if="classifyIndex >= 0">{{ classifyArray[classifyIndex].label }}</text>
						<text
							v-else>分类</text>
						<image src="https://img.2024csnl.com/static/2.x/a72.png" mode=""></image>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="data-list">
			<view class="list">
				<view
					v-for="(item, index) in tableData"
					:key="index"
					class="item">
					<view class="cell">
						<view class="thead">
							<view class="icon">
								<image src="https://img.2024csnl.com/static/2.x/logo.png" mode=""></image>
							</view>
							<view class="exp">
								<view class="name">
									<text>{{ item.name }}</text>
								</view>
								<view class="time">
									<text>{{ item.createtime }}</text>
								</view>
							</view>
						</view>
						<view class="tbody">
							<view :class="{
									'rich': true,
									'is-showall': item.isShowAll
								}">
								<view class="text">
									<text class="btn" @click="changeItemShowAll(index)">展开全文</text>
									<view v-html="item.content"></view>
								</view>
							</view>
							<view class="imgs">
								<view :class="{
									'row': true,
									'is-one': true
								}">
									<image
										:src="item.pic"
										mode="widthFix">
									</image>
								</view>
							</view>
						</view>
						<view class="tfoot">
							<!-- <view
								class="row"
								@click="handleShare">
								<image src="https://img.2024csnl.com/static/2.x/a73.png" mode=""></image>
								<text>分享到好友</text>
							</view> -->
							<view
								class="row"
								@tap="handleDownload(item)">
								<image src="https://img.2024csnl.com/static/2.x/a74.png" mode=""></image>
								<text>一键下载</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view
			v-if="dialogVisible"
			class="share-dialog"
			@touchmove.stop.prevent="() => {}">
			<view class="mask"></view>
			<view class="layer">
				<view class="inner">
					<view class="box">
						<view class="thead">
							<view class="title">
								<text>去朋友圈分享</text>
							</view>
						</view>
						<view class="tbody">
							<view class="rich">
								<view class="text-1">
									<image src="https://img.2024csnl.com/static/2.x/a76.png" mode=""></image>
									<text>文字已复制</text>
								</view>
								<view class="text-1">
									<image src="https://img.2024csnl.com/static/2.x/a76.png" mode=""></image>
									<text>图片已批量下载</text>
								</view>
								<view class="text-2">
									<text>操作步骤：</text>
								</view>
								<view class="text-3">
									<text>1. 关闭小程序</text>
								</view>
								<view class="text-3">
									<text>2. 前往朋友圈，点击</text>
									<image src="https://img.2024csnl.com/static/2.x/a75.png" mode=""></image>
									<text>发图</text>
								</view>
								<view class="text-3">
									<text>3. 从手机相册选择图片，粘贴文字</text>
								</view>
								<view class="text-3">
									<text>4. 发布即可</text>
								</view>
							</view>
						</view>
						<view class="tfoot">
							<view
								class="btn is-cancel"
								@click="shareDialogCancel">
								<text>不再提示</text>
							</view>
							<view
								class="btn is-confirm"
								@click="shareDialogConfirm">
								<text>我知道了</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getArticle } from "@/api/index.js"
	
	export default {
		data() {
			return {
				tableData: [],
				timeArray: [
					{ label: '全部', value: '' },
					{ label: '一天内', value: '1' },
					{ label: '一周内', value: '2' },
					{ label: '一月内', value: '3' },
					{ label: '半年内', value: '4' },
					{ label: '一年内', value: '5' }
				],
				timeIndex: -1,
				classifyArray: [],
				classifyIndex: -1,
				dialogVisible: false,
				keyword: ''
			}
		},
		created () {
			this.getArticleClassify()
			this.getArticleData()
		},
		methods: {
			// 子分类
			async getArticleClassify () {
				const res = await getArticle('s=/ApiArticle/getartclasslist', {
					cid: 11
				})
				const { clist, status, msg } = res.data
				if (status == 1) {
					const nodes = clist.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					})
					nodes.unshift({
						label: '全部',
						value: ''
					})
					this.classifyArray = nodes
				} else {
					this.showToast(msg)
				}
			},
			async getArticleData () {
				const params = {
					cid: 11
				}
				if (this.keyword) params.keyword = this.keyword
				if (this.timeIndex >= 0) params.period = this.timeArray[this.timeIndex].value
				if (this.classifyIndex >= 0) params.cid = this.classifyArray[this.classifyIndex].value
				const res = await getArticle('s=/ApiArticle/getartlist', {
					...params
				})
				const { data, status, msg } = res.data
				if (status == 1) {
					this.tableData = data
				} else {
					this.showToast(msg)
				}
			},
			// 思索
			search () {
				this.getArticleData()
			},
			// 筛选
			bindPickerChange1 (e) {
				this.timeIndex = e.detail.value
				this.getArticleData()
			},
			bindPickerChange2 (e) {
				this.classifyIndex = e.detail.value
				this.getArticleData()
			},
			// 切换显示全文
			changeItemShowAll (index) {
				const tableData = JSON.parse(JSON.stringify(this.tableData));
				tableData[index].isShowAll = !tableData[index].isShowAll;
				this.tableData = JSON.parse(JSON.stringify(tableData));
			},
			showDetail (item) {
				this.onSkip(`/package/we/pages/article-detail/detail?id=${item.id}`)
			},
			// 分享
			handleShare () {
				this.dialogVisible = true
			},
			// 不再提示
			shareDialogCancel () {
				this.dialogVisible = false
			},
			// 我知道了
			shareDialogConfirm () {
				this.dialogVisible = false
			},
			// 下载
			handleDownload (obj) {
				// #ifdef H5
				try {
					// obj.pic = 'http://localhost:8080/h5/static/tab/mine-act.png'
					var canvas = document.createElement('canvas');
					var img = document.createElement('img');
					img.setAttribute('crossOrigin', 'Anonymous');
					img.crossOrigin = '*';
					img.onload = function (e) {
						canvas.width = img.width;
						canvas.height = img.height;
						var context = canvas.getContext('2d');
						context.drawImage(img, 0, 0, img.width, img.height);
						canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
						canvas.toBlob(blob => {
							var a = document.createElement('a');
							a.href = window.URL.createObjectURL(blob);
							a.download = obj.name;
							a.click();
						}, `image/png`);
					};
					img.src = obj.pic + '?v=' + Math.random();
				} catch (e) {
					uni.showToast({
						title: '下载失败，请长按图片下载'
					});
				}
				// #endif
				// #ifdef MP
				uni.showLoading({
					title: '正在下载'
				});
				uni.downloadFile({
					url: obj.pic,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
											title: '保存成功'
									});
								},
								fail: function() {
									uni.showToast({
											icon:'none',
											title: '保存失败'
									});
								},
								complete: function() {
									uni.hideLoading()
								}
							});
						} else {
							uni.hideLoading()
							uni.showToast({
								icon:'none',
								title: '保存失败'
							})
						}
					},
					fail: function() {
						uni.hideLoading()
						uni.showToast({
							icon:'none',
							title: '保存失败'
						})
					}
				})
				// #endif
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: calc(100vh - 100rpx);
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}
	
	.search-bar {
		position: sticky;
		top: 0;
		z-index: 10;
		padding: 20rpx;
		background: #ffffff;
		.search-box {
			background: #f8f8f8;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			.icon {
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}
			.input {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
			}
			.btn {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				opacity: 0;
			}
		}
	}
	
	.select-bar {
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		margin-top: -20rpx;
		.item {
			flex: 1;
			position: relative;
			& + .item {
				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 30rpx;
					bottom: 30rpx;
					border: 1rpx solid #eee;
				}
			}
			.picker-value {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					font-size: 30rpx;
				}
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.data-list {
		.list {}
		.item {
		}
		.cell {
			margin: 20rpx 0;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx;
		}
		.thead {
			display: flex;
			align-items: center;
			.icon {
				image {
					display: block;
					width: 90rpx;
					height: 90rpx;
				}
			}
			.exp {
				flex: 1;
				margin: 0 0 0 20rpx;
				.name {
					line-height: 50rpx;
					font-size: 30rpx;
				}
				.time {
					line-height: 40rpx;
					color: #999;
				}
			}
		}
		.tbody {
			margin: 20rpx 0;
			.rich {
				display: flex;
				&.is-showall {
					.text {
						-webkit-line-clamp: 9999;
					}
					.btn {
						display: none;
					}
				}
				.text {
					line-height: 50rpx;
					font-size: 30rpx;
					text-align: justify;
					display: -webkit-box;
					-webkit-line-clamp: 6;
					-webkit-box-orient: vertical;
					overflow: hidden;
					&:before {
						content: '';
						float: right;
						width: 0;
						height: calc(100% - 50rpx);
						background: red;
					}
					.btn {
						float: right;
						color: #7B61FF;
						clear: both;
						margin-left: 20rpx;
					}
				}
			}
			.imgs {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin: 10rpx -20rpx;
				.row {
					margin: 1vw;
					&.is-one {
						image {
							width: 92vw;
						}
					}
					image {
						display: block;
						width: 30vw;
						height: 30vw;
					}
				}
			}
		}
		.tfoot {
			position: relative;
			display: flex;
			align-items: center;
			padding-top: 20rpx;
			border-top: 1px solid #eee;
			.row {
				position: relative;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;
				& + .row {
					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 10rpx;
						bottom: 10rpx;
						border-left: 1px solid #eee;
					}
				}
				image {
					display: block;
					width: 46rpx;
					height: 46rpx;
					margin-right: 20rpx;
				}
				text {
					font-size: 30rpx;
				}
			}
		}
	}
	
	.share-dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
			background: fade(#000, 70%);
		}
		.layer {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.inner {
			position: relative;
		}
		.box {
			position: relative;
			background: #ffffff;
			border-radius: 20rpx;
			width: 90vw;
			padding: 20rpx 0;
		}
		.thead {
			position: relative;
			text-align: center;
			.title {
				line-height: 100rpx;
				font-size: 34rpx;
				color: #000;
			}
		}
		.tbody {
			padding: 40rpx;
			.rich {
				.text-1 {
					position: relative;
					padding: 10rpx 0;
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
						vertical-align: -10rpx;
					}
					text {
						color: #41644A;
						font-size: 30rpx;
					}
				}
				.text-2 {
					margin: 20rpx 40rpx 10rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #000;
				}
				.text-3 {
					line-height: 40rpx;
					font-size: 26rpx;
					color: #999;
					margin: 0 40rpx;
					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						margin: 0 10rpx;
					}
				}
			}
		}
		.tfoot {
			display: flex;
			align-items: center;
			margin: 0 20rpx;
			.btn {
				flex: 1;
				margin: 20rpx;
				line-height: 90rpx;
				border-radius: 90rpx;
				text-align: center;
				background: #eee;
				font-size: 30rpx;
				&.is-cancel {
					background: #F2E3D8;
					color: #263A29;
				}
				&.is-confirm {
					background: #41644A;
					color: #fff;
				}
			}
		}
	}
	
</style>
